<template>
	<view class="container">
		<!-- 消息提示 -->
		<u-toast ref="uToast" />
		
		<view style="height: var(--status-bar-height);"></view>
		<view v-for="item,index in vodList" :key="index" style="margin-top: 10px;">
			<u-swipe-action>
				<u-swipe-action-item @click="del(item.vodId)" :options="options">
					<view class="swipe-action">
						<view class="swipe-action__content">

							<view @click="itemClick(item.vodId)"
								style="display: flex;flex-direction: row;border: 1px solid #ffce45;width: 100%;height: 160px;border-radius: 10px;">
								<view class="img" style="margin: 5px 5px 10px 10px;">
									<image style="height: 150px;width: 110px;border-radius: 6px;object-fit: cover;"
										:src="item.vodPic">
									</image>
								</view>
								<view class="introduce"
									style="width: 100%;display: flex;flex-direction: column;margin: 5px 5px 10px 10px;">
									<text
										style="font-size: 17px;font-weight: bold; width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.vodName}}</text>
									<view style="margin-top: 15px;display: flex;flex-direction: row;">
										<u-rate readonly size="22" :value="parseFloat(item.vodDoubanScore)/2"
											active-color="#ffce45" inactive-color="#b2b2b2"></u-rate>
										<text style="color: #76797d;">{{item.vodDoubanScore}}</text>
									</view>
									<text
										style="display:inline-block; word-wrap: break-word;margin-top: 15px;color: #76797d;font-size: 10px;height: 40px; width: 200px;overflow: hidden;text-overflow: ellipsis;">
										{{item.vodBlurb}}
									</text>
									<view
										style="margin:10px 0px 0px 0px;font-size: 10px;color: #76797d;width: 50px;height: 19px;border-radius: 5px;background-color: #e8edf3;text-align: center;">
										<text>{{item.vodYear}}年</text>
									</view>
								</view>
							</view>

						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>

	</view>
</template>

<script>
	import {
		getFavourite,
		deleteFavourite
	} from '@/config/api.js'
	export default {
		data() {
			return {
				userId: '',
				vodList: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#ff0000',
					}
				}]
			};
		},
		onTabItemTap(){
			this.init();
		},
		onShow() {
			this.init();
		},
		methods: {
			init() {
				//判断是否登录
				if (!getApp().globalData.isLogin) {
					this.$refs.uToast.show({
						position: 'top',
						message: '请登录，功能才能正常使用。',
						type: 'error',
					})
					return;
				}
				try {
					var res = uni.getStorageSync('user')
					if (res) {
						this.userId = res.userId
					}
				} catch (e) {
					// error
					console.log(e)
				}
				getFavourite({
					params: {
						userId: this.userId
					}
				}).then(res => {
					console.log(res)
					this.vodList = res.data.data;
					//根据时间排序
					let time = new Date(this.vodList[1].vodTime);
					this.vodList.sort((a,b)=>{
						return new Date(b.vodTime).getTime() - new Date(a.vodTime).getTime();
					})
				}).catch(err => {
					console.log(err)
				})
			},
			del(vodId) {
				uni.showLoading({
					title: '正在删除...'
				})
				deleteFavourite({
					params: {
						userId: this.userId,
						vodId: vodId
					}
				}).then(res => {
					uni.hideLoading();
					if (res.data.data === 1) {
						this.$refs.uToast.show({
							position: 'top',
							message: '删除成功',
							type: 'success',
						})
						this.init();
					} else {
						this.$refs.uToast.show({
							position: 'top',
							message: '删除失败',
							type: 'error',
						})
						this.init();
					}
				}).catch(err => {
					uni.hideLoading();
					console.log(err)
					this.$refs.uToast.show({
						position: 'top',
						message: '删除失败',
						type: 'error',
					})
					this.init();
				})
			},
			itemClick(data) {
				//data：vodId
				uni.navigateTo({
					url: '/pages/video/video?vodId=' + data,
				})
			}
		}
	};
</script>

<style>

</style>